<template>
	<view class="home-page">
		<!-- 轮播图 -->
		<up-swiper :list="swiperList" keyName="image" height="300rpx" previousMargin="30" nextMargin="30" circular
			radius="5" bgColor="#ffffff">
		</up-swiper>

		<!-- 功能按钮区 -->
		<view class="func-buttons">
			<view class="func-item" v-for="(item, index) in funcList" :key="index" @click="handleFuncClick(item)">
				<up-icon :name="item.icon" :label="item.text" size="35" labelSize="15"></up-icon>
			</view>
		</view>

		<!-- 公告区 -->
		<view class="notice-card">
			<u-title>
				最新公告
			</u-title>
			<up-list height="150">
				<up-list-item v-for="(item, index) in notices" :key="index">
					<up-cell :title="item.title" isLink url="/pages/notice">
						<template #icon>
							<up-tag :text="item.type" plain size="mini"
								:type="item.type == '优化' ? 'warning' : 'error' "></up-tag>
						</template>
					</up-cell>
				</up-list-item>
			</up-list>
		</view>

		<!-- 精选内容 - 新样式 -->
		<view class="featured-section">
			<u-title>
				推荐
			</u-title>
			<!-- Tab切换栏 -->
			<view class="content-tabs">
				<view 
					class="tab-item" 
					v-for="tab in tabs" 
					:key="tab.value"
					:class="{ active: activeTab === tab.value }"
					@click="handleTabChange(tab.value)"
				>
					<text class="tab-text">{{ tab.label }}</text>
				</view>
			</view>

			<!-- 内容列表 -->
			<view class="post-list">
				<view 
					class="post-card" 
					v-for="post in postList" 
					:key="post.id"
					@click="handleGoPostDetail(post.id)"
				>
					<!-- 标签 -->
					<view class="post-tags">
						<view class="tag" :class="`tag-${post.category}`">{{ post.categoryName }}</view>
						<view class="tag tag-type" v-if="post.type">{{ post.type }}</view>
					</view>

					<!-- 标题 -->
					<text class="post-title">{{ post.title }}</text>

					<!-- 辅助标签 -->
					<view class="post-meta-tags" v-if="post.tags && post.tags.length">
						<text class="meta-tag" v-for="tag in post.tags" :key="tag">{{ tag }}</text>
					</view>

					<!-- 内容预览 -->
					<text class="post-content">{{ post.content }}</text>

					<!-- 图片 -->
					<view class="post-images" v-if="post.images && post.images.length">
						<up-image 
							v-for="(img, idx) in post.images.slice(0, 3)" 
							:key="idx"
							:src="img" 
							width="220rpx" 
							height="220rpx"
							radius="8"
							:show-loading="true"
						></up-image>
						<view class="more-images" v-if="post.images.length > 3">
							<text>+{{ post.images.length - 3 }}</text>
						</view>
					</view>

					<!-- 底部信息 -->
					<view class="post-footer">
						<view class="author-info">
							<up-image :src="post.avatar" width="40rpx" height="40rpx" shape="circle"></up-image>
							<text class="author-name">{{ post.author }}</text>
							<text class="post-time">{{ post.time }}</text>
						</view>
						<view class="post-stats">
							<up-icon name="eye" size="14" color="#999"></up-icon>
							<text class="stat-text">{{ post.views }}</text>
						</view>
					</view>
				</view>

				<!-- 加载提示 -->
				<view class="load-more" v-if="loading">
					<up-loading-icon></up-loading-icon>
					<text class="load-text">加载中...</text>
				</view>
				<view class="no-more" v-if="!hasMore && postList.length > 0">
					—— 没有更多了 ——
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { mockGetPosts } from '../../server/mock.js';
import { formatRelativeTime } from '../../utils/date.js';

// 轮播图数据
const swiperList = ref([
	{ image: 'https://picsum.photos/200/200?random=888', title: '第一' },
	{ image: 'https://picsum.photos/200/200?random=88', title: '第二' },
	{ image: 'https://picsum.photos/200/200?random=8', title: '第三' }
]);

// 功能按钮
const funcList = ref([
	{ icon: 'calendar', text: '活动中心', url: '/pages/activity/activityList' },
	{ icon: 'bookmark', text: '公告', url: '/pages/notice/noticeList' },
	{ icon: 'zhihu', text: '知识库', url: '/pages/knowledge/knowledgeList' },
	{ icon: 'bag-fill', text: '好价', url: '/pages/goods/goodsList' }
]);

// 公告数据
const notices = ref([
	{ title: '校园平台小程序正式上线！', type: '通知' },
	{ title: '平台功能优化公告', type: '优化' },
	{ title: '禁止发布违规内容的重要提醒', type: '通知' }
]);

// Tab列表
const tabs = ref([
	{ label: '默认', value: 'default' },
	{ label: '附近', value: 'nearby' },
	{ label: '最新', value: 'latest' },
	{ label: '热门', value: 'hot' }
]);

const activeTab = ref('default');

// 帖子列表
const postList = ref([]);
const loading = ref(false);
const hasMore = ref(true);

/**
 * 加载帖子列表
 */
const loadPosts = async () => {
	loading.value = true;
	try {
		const res = await mockGetPosts({ pageNum: 1, pageSize: 10 });
		if (res.code === 200) {
			// 转换数据格式
			postList.value = (res.data.list || []).map(post => ({
				id: post.postId,
				title: post.title,
				content: post.content,
				category: getCategoryKey(post.plateId),
				categoryName: getCategoryName(post.plateId),
				type: post.subCategory,
				tags: getPostTags(post),
				images: post.image || [],
				author: post.nickname,
				avatar: post.avatar,
				time: formatRelativeTime(post.createTime),
				views: post.viewCount
			}));
		}
	} catch (error) {
		console.error('加载帖子失败:', error);
	} finally {
		loading.value = false;
	}
};

/**
 * 获取分类key
 */
const getCategoryKey = (plateId) => {
	const map = { 1: 'discuss', 2: 'share', 3: 'trade', 4: 'help' };
	return map[plateId] || 'other';
};

/**
 * 获取分类名称
 */
const getCategoryName = (plateId) => {
	const map = { 1: '招聘', 2: '推广', 3: '二手', 4: '求助' };
	return map[plateId] || '其他';
};

/**
 * 获取帖子标签
 */
const getPostTags = (post) => {
	const tags = [];
	if (post.tradeCondition) tags.push(post.tradeCondition);
	if (post.helpUrgency) tags.push(post.helpUrgency);
	if (post.tradeStatus === 'available') tags.push('在售');
	return tags.slice(0, 3);
};

/**
 * 功能按钮点击
 */
const handleFuncClick = (item) => {
	if (item.url) {
		uni.navigateTo({ url: item.url });
	}
};

/**
 * Tab切换
 */
const handleTabChange = (value) => {
	activeTab.value = value;
	// 这里可以根据不同tab加载不同数据
	loadPosts();
};

/**
 * 跳转到帖子详情
 */
const handleGoPostDetail = (postId) => {
	uni.navigateTo({
		url: `/pages/post/postInfo?postId=${postId}`
	});
};

// 页面加载时获取数据
onMounted(() => {
	loadPosts();
});
</script>

<style scoped lang="scss">
	@import './home.scss';
</style>